<template>
    <el-menu
        :default-active="activeIndex"
        :default-openeds="defaultOpeneds"
        :mode="propJson.menuModelDirection"
        :background-color="propJson.backgroundColor"
        :text-color="propJson.textColor"
        :active-text-color="propJson.activeTextColor"
        :style="execClass"
        :router="true"
        :unique-opened="propJson.uniqueOpened"
        :menu-trigger="propJson.menuTrigger"
        :collapse-transition="true"
        @select="menuSelect"
    >
        <p v-for="item in dataList" :key="item.routeTo">
            <el-menu-item :index="item.routeTo" v-if="item.children.length === 0" :style="execFirstFloorStyle">{{item.title}}</el-menu-item>
            <el-sub-menu :index="item.routeTo" v-else>
                <template #title>
                    <span :style="execFirstFloorStyle">
                        {{item.title}}
                    </span>
                </template>
                <span v-for="subItem in item.children" :key="subItem.routeTo">
                    <el-menu-item v-if="subItem.children.length === 0" :index="subItem.routeTo" :style="execSecondFloorStyle">{{subItem.title}}</el-menu-item>
                    <el-sub-menu v-else :index="subItem.routeTo">
                        <template #title>
                            <span :style="execSecondFloorStyle">
                                {{subItem.title}}
                            </span>
                        </template>
                        <el-menu-item v-for="subSonItem in subItem.children" :key="subSonItem.routeTo" :index="subSonItem.routeTo" :style="execThirdFloorStyle">
                            {{subSonItem.title}}
                        </el-menu-item>
                    </el-sub-menu>
                </span>
            </el-sub-menu>
        </p>
    </el-menu>
</template>

<script>
import {getCommonParamObj} from "@/utils/commonParamUtil";

export default {
    name: "MenuComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            breadCrumbObjList: []
        }
    },
    methods: {
        getParentRouteTo(list, routeTo, parentObj, currentParent) {
            for (let i = 0; i < list.length; i++) {
                let info = list[i]
                if (info.routeTo === routeTo) {
                    parentObj.parent = currentParent
                    return
                }
                this.getParentRouteTo(info.children, routeTo, parentObj, info.routeTo)
                if (parentObj.parent !== "") {
                    return
                }
            }
            parentObj.parent = "";
        },
        menuSelect(val) {
            this.getBreadCrumbList(val);
        },
        getBreadCrumbList(path) {
            for (let i = 0; i < this.breadCrumbObjList.length; i++) {
                let val = this.breadCrumbObjList[i];
                if (val.routeTo === path) {
                    // 修改变量
                    let obj = getCommonParamObj(this.commonParam, this.propJson.breadCrumbVariable);
                    obj.variableValue = val.routeMenu;
                    break;
                }
            }
        }
    },
    computed: {
        activeIndex() {
            return this.$route.path
        },
        execClass() {
            let resStyle = "width: 100%;"
            if (this.propJson.menuHeight) {
                resStyle += "height: " + this.propJson.menuHeight + ";";
            }
            return resStyle;
        },
        defaultOpeneds() {
            let parentObj = {parent: ""}
            this.getParentRouteTo(this.dataList, this.$route.path, parentObj, "")
            return [parentObj.parent];
        },
        dataList() {
            return this.propJson.menuJson
        },
        execFirstFloorStyle() {
            let resStyle = "";
            resStyle += "font-size: " + this.propJson.firstMenuFontSize + ";";
            return resStyle;
        },
        execSecondFloorStyle() {
            let resStyle = "";
            resStyle += "font-size: " + this.propJson.secondMenuFontSize + ";";
            return resStyle;
        },
        execThirdFloorStyle() {
            let resStyle = "";
            resStyle += "font-size: " + this.propJson.thirdMenuFontSize + ";";
            return resStyle;
        }
    },
    mounted() {
        if (!this.propJson.isRecordBreadCrumb) {
            return;
        }
        // 遍历菜单
        for (let firstIndex = 0; firstIndex < this.dataList.length; firstIndex++) {
            let firstMenu = this.dataList[firstIndex];
            let firstMenuRouteTo = firstMenu.routeTo;
            let firstMenuList = []
            firstMenuList.push(firstMenu)
            let obj = {
                routeTo: firstMenuRouteTo,
                routeMenu: firstMenuList
            }
            this.breadCrumbObjList.push(obj)
            // 二级菜单
            if (firstMenu.children.length > 0) {
                let childrenList = firstMenu.children;
                for (let secondIndex = 0; secondIndex < childrenList.length; secondIndex++) {
                    let secondMenu = childrenList[secondIndex];
                    let secondMenuRouteTo = secondMenu.routeTo;
                    let secondMenuList = []
                    secondMenuList.push(firstMenu);
                    secondMenuList.push(secondMenu);
                    let obj = {
                        routeTo: secondMenuRouteTo,
                        routeMenu: secondMenuList
                    }
                    this.breadCrumbObjList.push(obj);
                    // 三级菜单
                    if (secondMenu.children.length > 0) {
                        let thirdChildrenList = secondMenu.children;
                        for (let thirdIndex = 0; thirdIndex < thirdChildrenList.length; thirdIndex++) {
                            let thirdMenu = thirdChildrenList[thirdIndex];
                            let thirdMenuRouteTo = thirdMenu.routeTo;
                            let thirdMenuList = []
                            thirdMenuList.push(firstMenu);
                            thirdMenuList.push(secondMenu);
                            thirdMenuList.push(thirdMenu);
                            let obj = {
                                routeTo: thirdMenuRouteTo,
                                routeMenu: thirdMenuList
                            }
                            this.breadCrumbObjList.push(obj)
                        }
                    }
                }
            }
        }
        this.getBreadCrumbList(this.$route.fullPath);
    }
}
</script>

<style scoped lang="less">
.el-menu {
    border-right: 0;
}
</style>